<template>
    <div class="sign-card">
        <div class="left">
            <div class="status">{{statusText}}</div>
            <div class="time">{{info.time}}</div>
        </div>
        <div class="right" :class="{plus: flag === '+'}">
            {{flag}}{{info.money}}
        </div>
    </div>
</template>

<script>
    export default {
        name: "SignCard",
        props: {
            info: {
                type: Object,
                default: () => ({})
            }
        },
        computed: {
            statusText() {
                if (this.info.status === '0') {
                    return '打卡失败';
                } else {
                    return '打卡成功';
                }
            },
            flag() {
                if (this.info.status === '0') {
                    return '-';
                } else {
                    return '+';
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .sign-card {
        display: flex;
        padding: 10/3.75+vw 0;
        align-items: center;
        justify-content: space-between;
        font-size: 16/3.75+vw;
        border-top: 1px solid #dedede;
        border-bottom: 1px solid #dedede;
        & +.sign-card {
            border-top: none;
        }
        .left {
            display: flex;
            flex-direction: column;
            .status {
                color: #000;
                font-size: 13.5/3.75+vw;
            }
            .time {
                margin-top: 10/3.75+vw;
                color: #747474;
                font-size: 12/3.75+vw;
            }
        }
        .right {
            color: #333;
            font-size: 15/3.75+vw;
            &.plus {
                color: #ff293a;
            }
        }
    }
</style>
